<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>入职信息填写</title>
    <link rel="stylesheet" href="__CDN__/assets/salary/css/all.min.css">
    <script type="text/javascript" src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="__CDN__/assets/js/layer/layer.js"></script>
    <style>
* {margin:0;padding:0;box-sizing:border-box;}
body {min-height:100vh;background:linear-gradient(135deg,#9bdff6 0%,#439cff 100%);display:flex;flex-direction:column;align-items:center;font-family:"PingFang SC","Microsoft YaHei",sans-serif;padding:40px 20px;}
.logo {margin-bottom:30px;text-align:center;}
.logo img {width:200px;height:auto;}
.form-container {width:100%;max-width:800px;background:rgba(255,255,255,0.9);padding:40px;border-radius:16px;box-shadow:0 0 30px rgba(0,0,0,0.1);backdrop-filter:blur(10px);}
.form-title {text-align:center;font-size:28px;margin-bottom:40px;color:#333;font-weight:500;}
.form-group {margin-bottom:25px;position:relative;}
.form-group i {position:absolute;left:12px;top:14px;color:#999;font-size:18px;}
.form-group input,.form-group select,.form-group textarea {width:100%;padding:12px 12px 12px 40px;border:1px solid #ddd;border-radius:8px;font-size:15px;outline:none;transition:all 0.3s ease;}
.form-group textarea {min-height:150px;padding:12px 12px 12px 12px;line-height:1.6;font-family:inherit;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus {border-color:#439cff;box-shadow:0 0 0 2px rgba(67,156,255,0.2);}
.section-title {font-size:18px;color:#333;margin:35px 0 20px;padding-left:12px;border-left:4px solid #439cff;font-weight:500;}
.submit-btn {width:100%;padding:14px;background:#439cff;color:white;border:none;border-radius:8px;font-size:16px;cursor:pointer;transition:all 0.3s ease;margin-top:30px;font-weight:500;}
.submit-btn:hover {background:#3288e0;transform:translateY(-1px);}
.submit-btn:active {transform:translateY(1px);}
input::placeholder,textarea::placeholder {color:#999;}
.error-message {color:#ff4444;font-size:13px;margin-top:6px;display:none;padding-left:12px;}
select {appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 10px center;background-size:1em;}
@media (max-width:768px) {.form-container {padding:25px;}
.form-title {font-size:24px;margin-bottom:30px;}
.section-title {font-size:16px;margin:25px 0 15px;}
}
    </style>
</head>
<body>
    <div class="logo">
        <img src="__CDN__/assets/salary/img/logo1.png" alt="公司logo">
    </div>
    
    <div class="form-container">
        <h2 class="form-title">入职信息</h2>
        <form id="infoForm">
            <div class="section-title">基本信息</div>
            <div class="form-group">
                <i class="fas fa-user"></i>
                <input type="text" name="name" id="name" placeholder="请输入姓名" value="{$staffInfo.name}">
                <div class="error-message" id="nameError">请输入正确的姓名</div>
            </div>
            <div class="form-group">
                <i class="fas fa-venus-mars"></i>
                <select id="gender" name="gender">
                    <option value="0">请选择性别</option>
                    <option {if $staffInfo.gender == 1}selected{/if} value="1">男</option>
                    <option {if $staffInfo.gender == 2}selected{/if} value="2">女</option>
                </select>
                <div class="error-message" id="genderError">请选择性别</div>
            </div>
            <div class="form-group">
                <i class="fas fa-mobile-alt"></i>
                <input type="tel" name="mobile" id="mobile" placeholder="请输入手机号" disabled value="{$staffInfo.mobile}" >
                <div class="error-message" id="phoneError">请输入正确的手机号码</div>
            </div>
            <div class="form-group">
                <i class="fas fa-id-card"></i>
                <input type="text" name="idcard" id="idcard" placeholder="请输入身份证号" value="{$staffInfo.idcard}" >
                <div class="error-message" id="idCardError">请输入正确的身份证号</div>
            </div>


            <div class="form-group">
                <i class="fas fa-home"></i>
                <input type="text" name="currentAddress" id="currentAddress" placeholder="请输入现住址" value="{$staffInfo.currentAddress}">
                <div class="error-message" id="currentAddressError">请输入现住址</div>
            </div>

            <div class="form-group">
                <i class="fas fa-map-marker-alt"></i>
                <input type="text" name="permanentAddress" id="permanentAddress" placeholder="请输入户籍地址" value="{$staffInfo.permanentAddress}">
                <div class="error-message" id="permanentAddressError">请输入户籍地址</div>
            </div>
            <div class="section-title">紧急联系人信息</div>
            <div class="form-group">
                <i class="fas fa-user-friends"></i>
                <input type="text" name="urgent_name" id="emergencyName" placeholder="请输入紧急联系人姓名" value="{$staffInfo.urgent_name}" >
                <div class="error-message" id="emergencyNameError">请输入正确的姓名</div>
            </div>
            <div class="form-group">
                <i class="fas fa-users"></i>
                <input type="text" name="urgent_relation" id="relationship" placeholder="请输入与紧急联系人关系" value="{$staffInfo.urgent_relation}">
                <div class="error-message" id="relationshipError">请输入正确的关系</div>
            </div>
            <div class="form-group">
                <i class="fas fa-phone"></i>
                <input type="tel" name="urgent_mobile" id="emergencyPhone" placeholder="请输入紧急联系人电话" value="{$staffInfo.urgent_mobile}" >
                <div class="error-message" id="emergencyPhoneError">请输入正确的电话号码</div>
            </div>

            <div class="section-title">工作经历</div>
            <div class="form-group">
                <textarea name="work_experience" id="workExperience" placeholder="请按以下格式填写工作经历：

1. 公司名称：
   职位：
   工作时间：
   工作内容：

2. 公司名称：
   职位：
   工作时间：
   工作内容：" >{$staffInfo.work_experience}</textarea>
                <div class="error-message" id="workExperienceError">工作经历不能为空</div>
            </div>

            <div class="section-title">银行账户信息</div>
            <div class="form-group">
                <i class="fas fa-credit-card"></i>
                <input type="text" name="bank_cardnum" id="bankCard" placeholder="请输入银行卡号" value="{$staffInfo.bank_cardnum}" >
                <div class="error-message" id="bankCardError">请输入正确的银行卡号</div>
            </div>
            <div class="form-group">
                <i class="fas fa-university"></i>
                <input type="text" id="bankName" name="bankName" placeholder="请输入开户行" value="{$staffInfo.bankName}" >
                <div class="error-message" id="bankNameError">请输入开户行名称</div>
            </div>

            <div class="section-title">入职公司</div>
            <div class="form-group">
                <i class="fas fa-building"></i>
                <select name="company_id" id="company" >
                    <option value="0">请选择入职公司</option>
                    {if $companyList}
                    {foreach $companyList as $list}
                    <option {if $list.id == $staffInfo.company_id}selected{/if} value="{$list.id}">{$list.name}</option>
                    {/foreach}
                    {/if}
                </select>
                <div class="error-message" id="companyError">请选择入职公司</div>
            </div>

            <button type="button" id="submit" class="submit-btn">提交</button>
        </form>
    </div>

    <script type="text/javascript">
    $(function() {
        var status = 1;
        $('#submit').click(function() {
            var data = $('form').serialize();

            if (status == 0) {
                return false;
            }
            status = 0

            $.post("{:url('index/saveuserinfo')}", data, function(res) {
                status = 1;
                if (res.code == 1) {
                    layer.msg(res.msg);
                } else if (res.code == 0) {
                    window.location.href="{:url('index/lookuserinfo')}";
                }
            }, 'json');
        });
    });
    </script>
</body>
</html>